<template>
  <div class="page">
    <!--左侧导航区-->
    <div class="navigator">
      <region-select
        v-if="isShowSalonSelect"
        ref="refSalonSelect"
        :mode="2"
        :dept="2"
        @selected="handleSalonSelected"></region-select>
      <div style="display: flex; padding: 5px 16px 0px 16px">
        <el-input
          v-model="searchKey"
          style="margin-right: 12px; width: 180px"
          placeholder="搜索管家"
          size="mini"
          clearable></el-input>
        <el-button v-if="isSearching" type="primary" icon="el-icon-loading" plain size="mini" disabled>查询</el-button>
        <el-button v-else type="primary" icon="el-icon-search" plain size="mini" @click.stop="doSearchKeeper">
          查询
        </el-button>
      </div>
      <div class="salon_div" :class="{ keeper_div_active: '' === choosedKid }" @click.stop="doShowSalon">
        <div style="display: flex; align-items: center; margin: 16px 0 0 0px">
          <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
          <span style="font-weight: 400; font-size: 18px; color: #333333">{{ sname }}</span>
        </div>
        <div style="font-weight: 400; font-size: 14px; margin: 5px 0 0 20px">
          <i v-if="sstc.isFetching" class="el-icon-loading"></i>
          <span v-else>重点顾客数量：{{ sstc.salonToday.noble2 }}</span>
        </div>
      </div>
      <!--管家列表-->
      <div class="navigator_ctx">
        <div
          v-for="(item, index) in keeperList"
          :key="'keeper' + index"
          class="keeper_div"
          :class="{ keeper_div_active: item.kid == choosedKid }"
          @click="doShowKeeper(index, item.kid)">
          <div style="display: flex; justify-content: space-between; margin-bottom: 12px">
            <div style="font-weight: 400; font-size: 14px">管家：{{ item.kname }}</div>
            <div v-if="item.rmk1 > 0" class="has_new">有新增</div>
          </div>
          <div style="font-weight: 400; font-size: 14px">重点顾客数量：{{ item.noble2 }}</div>
        </div>
      </div>
    </div>
    <!--右侧-->
    <div style="width: 76%; height: 100%; background-color: #f8f8fa">
      <div class="data_hd">
        <div class="data_hd_item">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-1.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">时间线更新</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ statisticToday.rmk1 }}</div>
          <div class="data_hd_bottom">
            <div style="display: flex">
              <div>月总数：</div>
              <div style="color: #ee5d5d">+{{ statisticMonth.rmk1 }}</div>
            </div>
            <div v-if="statisticToday.rmk1 > 0" class="has_new">有新增</div>
          </div>
        </div>
        <div class="data_hd_item">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-2.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">新增顾客</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ statisticToday.countClerk }}</div>
          <div class="data_hd_bottom">
            <div style="display: flex">
              <div>月总数：</div>
              <div style="color: #ee5d5d">+{{ statisticMonth.countClerk }}</div>
            </div>
            <div v-if="statisticToday.countClerk > 0" class="has_new">有新增</div>
          </div>
        </div>
        <div class="data_hd_item">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-4.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">今日成交</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ statisticToday.countDeal }}</div>
          <div class="data_hd_bottom">
            <div style="display: flex">
              <div>月成交：</div>
              <div>{{ statisticMonth.countDeal }}人</div>
            </div>
          </div>
        </div>
        <div class="data_hd_item">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-5.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">成交金额</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ statisticToday.volumeOfBusiness }}</div>
          <div class="data_hd_bottom">
            <div style="display: flex">
              <div>月成交：</div>
              <div>￥{{ statisticMonth.volumeOfBusiness }}</div>
            </div>
          </div>
        </div>
        <div class="data_hd_item">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-6.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">重点顾客</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ statisticToday.noble2 }}</div>
          <div class="data_hd_bottom">
            <div style="display: flex">
              <div>月总计：</div>
              <div>{{ statisticMonth.noble2 }}人</div>
            </div>
            <div v-if="statisticToday.noble2 > 0" class="has_new">有新增</div>
          </div>
        </div>
      </div>
      <!--数据区-->
      <div class="data_content">
        <!--居中的表格: 管家列表-->
        <div class="data_table">
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex; align-items: center">
              <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
              <span v-if="isSalon" style="font-weight: 400; font-size: 18px; color: #333333">当日数据</span>
              <span v-else style="font-weight: 400; font-size: 18px; color: #333333">顾客列表</span>
            </div>
            <div style="display: flex">
              <el-input
                v-if="isSalon"
                v-model="dataTable.searchKey"
                style="margin-right: 12px"
                placeholder="搜索管家"
                size="mini"
                clearable></el-input>
              <el-input
                v-else
                v-model="dataTable.searchKey"
                style="margin-right: 12px"
                placeholder="搜索顾客"
                size="mini"
                clearable></el-input>
              <el-button type="primary" icon="el-icon-search" plain size="mini" @click.stop="doSearchTable">
                查询
              </el-button>
            </div>
          </div>
          <!--管家列表-->
          <div v-if="isSalon">
            <el-table key="refKeeperTable" :data="dataTable.keeperList" style="width: 100%" :height="598">
              <el-table-column prop="kname" label="管家" width="120" align="left"></el-table-column>
              <el-table-column prop="rmk1" label="时间线" align="center"></el-table-column>
              <el-table-column prop="trust22" label="已破冰" width="120" align="center" sortable></el-table-column>
              <el-table-column label="成交金额" width="120" align="center" sortable>
                <template slot-scope="{ row }">￥{{ row.volumeOfBusiness }}</template>
              </el-table-column>
              <el-table-column prop="countClerk" label="新增顾客" width="120" align="center" sortable></el-table-column>
            </el-table>
          </div>
          <!--顾客列表-->
          <div v-else>
            <el-table
              ref="refClerkTable"
              key="refClerkTable"
              v-loading="clerkTable.dataListLoading"
              :data="clerkTable.dataList"
              :height="502"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row>
              <el-table-column prop="id" fixed label="序号" align="center" width="60"></el-table-column>
              <el-table-column
                prop="cname"
                fixed
                label="姓名"
                align="center"
                width="80"
                show-overflow-tooltip></el-table-column>
              <el-table-column fixed label="性别" align="center" width="60">
                <template slot-scope="{ row }">
                  <div v-if="row.sex === 2">其他</div>
                  <div v-if="row.sex === 1">女</div>
                  <div v-if="row.sex === 0">男</div>
                </template>
              </el-table-column>
              <el-table-column label="时间线状态" align="center" width="100" class-name="small-padding fixed-width">
                <template slot-scope="{ row }">
                  <div v-if="row.rmk === 1" class="rmk">
                    <div class="dot_red"></div>
                    <div class="has">有更新</div>
                  </div>
                  <div v-else class="rmk">
                    <div class="dot_grey"></div>
                    <div class="not">无更新</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="信任等级" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{ row }">
                  <div v-if="row.trust2 === 3">已信任</div>
                  <div v-if="row.trust2 === 2">已破冰</div>
                  <div v-if="row.trust2 === 1">未破冰</div>
                  <div v-if="row.trust2 === 0">未设置</div>
                </template>
              </el-table-column>
              <el-table-column label="消费能力" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{ row }">
                  <div v-if="row.bg2 === 3">没钱</div>
                  <div v-if="row.bg2 === 2">普通</div>
                  <div v-if="row.bg2 === 1">有钱</div>
                  <div v-if="row.bg2 === 0">超有钱</div>
                </template>
              </el-table-column>
              <el-table-column label="消费等级" align="center" class-name="small-padding fixed-width">
                <template slot-scope="{ row }">
                  <div v-if="row.grade === 4">S级</div>
                  <div v-if="row.grade === 3">A级</div>
                  <div v-if="row.grade === 2">B级</div>
                  <div v-if="row.grade === 1">C级</div>
                  <div v-if="row.grade === 0">未定</div>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="clerkTable.total > 0"
              :total="clerkTable.total"
              :page.sync="clerkTable.pageParam.page"
              :limit.sync="clerkTable.pageParam.limit"
              @pagination="doSearchTable"></pagination>
          </div>
        </div>
        <!--顾客分布统计-->
        <div class="data_pct">
          <div style="display: flex; align-items: center">
            <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
            <span style="font-weight: 400; font-size: 18px; color: #333333">顾客分布</span>
          </div>
          <div class="data_pct_hd">
            <div class="data_pct_item">
              <div style="display: flex; justify-content: space-between; align-items: center">
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">全部顾客</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">{{ statisticAll.countClerk }}</div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">重点关注</div>
                  <div style="color: #ff6666; font-weight: 400; font-size: 16px">{{ statisticAll.noble2 }}</div>
                </div>
                <div style="width: 1px; height: 20px; border: 1px solid #724eff"></div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">S级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ statisticAll.grade4 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">C级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ statisticAll.grade1 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">B级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ statisticAll.grade2 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">A级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ statisticAll.grade3 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">未定级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ statisticAll.grade0 }}
                  </div>
                </div>
              </div>
              <div style="display: flex; font-size: 14px">
                <div style="color: #666">重点顾客(占比)：</div>
                <div style="color: #ff5b5b">
                  {{ percentAll.noble2 }}
                </div>
              </div>
            </div>
            <div class="data_pct_item">
              <div style="font-size: 14px; color: #724eff">消费能力标签(占比)</div>
              <div style="display: flex; justify-content: space-between">
                <div style="font-size: 14px; color: #666">超有钱：{{ percentAll.bg20 }}</div>
                <div style="font-size: 14px; color: #666">有钱：{{ percentAll.bg21 }}</div>
                <div style="font-size: 14px; color: #666">普通：{{ percentAll.bg22 }}</div>
                <div style="font-size: 14px; color: #666">没钱：{{ percentAll.bg23 }}</div>
              </div>
            </div>
            <div class="data_pct_item">
              <div style="font-size: 14px; color: #3a974c">信任标签(占比)</div>
              <div style="display: flex; justify-content: space-between">
                <div style="font-size: 14px; color: #666">未破冰：{{ percentAll.trust21 }}</div>
                <div style="font-size: 14px; color: #666">已破冰：{{ percentAll.trust22 }}</div>
                <div style="font-size: 14px; color: #666">已信任：{{ percentAll.trust23 }}</div>
              </div>
            </div>
            <div class="data_pct_item">
              <div style="font-size: 14px; color: #f29339">状态标签(占比)</div>
              <div style="display: flex; justify-content: space-between">
                <div style="font-size: 14px; color: #666">正常：{{ percentAll.dengji0 }}</div>
                <div style="font-size: 14px; color: #666">预警：{{ percentAll.dengji1 }}</div>
                <div style="font-size: 14px; color: #666">失速：{{ percentAll.dengji2 }}</div>
                <div style="font-size: 14px; color: #666">放弃：{{ percentAll.dengji3 }}</div>
              </div>
            </div>
          </div>
          <div class="data_chart">
            <div style="display: flex; justify-content: space-between; flex-direction: row">
              <div style="display: flex; align-items: center">
                <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
                <span style="font-weight: 400; font-size: 18px; color: #333333">数据分析</span>
              </div>
              <div>
                <el-date-picker
                  v-model="chart.queryMonth"
                  type="month"
                  placeholder="选择月"
                  style="width: 120px"
                  size="mini"
                  @change="loadMonthBusiness"></el-date-picker>
              </div>
            </div>
            <div>
              <chart-statistic ref="refChart"></chart-statistic>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import * as brchApi from '@/api/branch';
import * as txsApi from '@/api/txs';
// 引入自定义组件
import Pagination from '@/components/Pagination';
import '@/utils/datefmt';
import { isAdminRole, isCoachRole } from '@/utils/enum/roles';
import RegionSelect from '@/views/salon/RegionSelect.vue';
import ChartStatistic from './charts/ChartStatistic.vue';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'SalonStatistic',
  components: { Pagination, 'chart-statistic': ChartStatistic, ['region-select']: RegionSelect },
  data() {
    return {
      salon: {},
      sid: undefined,
      sname: undefined,
      isSalon: true,
      searchKey: '',
      isSearching: false,
      choosedKid: '',
      keeperList: [],
      statisticToday: {},
      statisticMonth: {},
      statisticAll: {},
      percentToday: {},
      percentAll: {},
      sstc: {
        isFetching: false,
        salonToday: {},
        salonMonth: {},
        salonAll: {},
        keeperToday: [],
        keeperMonth: [],
        keeperAll: [],
        salonTodayPct: {},
        keeperTodayPct: {},
        salonAllPct: {},
        keeperAllPct: {},
      },
      dataTable: {
        searchKey: '',
        isSearching: false,
        keeperList: [],
      },
      clerkTable: {
        // 筛选的顾客列表
        dataList: [],
        dataListLoading: false,
        total: 0,
        pageParam: { page: 1, limit: 10 },
        selectedClerks: [],
      },
      chart: {
        queryMonth: new Date(),
        isFetching: false,
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
    isShowSalonSelect() {
      return isAdminRole(this.deptId) || isCoachRole(this.deptId);
    },
  },
  created() {
    if (!this.isShowSalonSelect) {
      this.salon.salonId = this.openId;
      this.salonStatistic();
    }
  },
  mounted() {
    // this.loadMonthBusiness(new Date());
  },
  methods: {
    handleSalonSelected: async function (salon) {
      if (salon) {
        this.salon.salonId = salon.salonId;
        this.salon.salonNo = salon.salonCode;
        this.salon.salonName = salon.salonName;
        this.salonStatistic();
      }
    },
    salonStatistic: async function () {
      if (!this.salon.salonId) {
        // 不属于任何门店的用户(通常是系统管理员)
        return;
      }
      if (this.sstc.isFetching) {
        return;
      }
      this.sstc.isFetching = true;
      const errAlertMsg = '查询统计数据失败';
      await brchApi
        .getStatistics(this.salon.salonId)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          const ret = res.data.data;
          this.sid = ret.sid;
          this.sname = ret.sname;
          if (ret.salonToday) {
            this.sstc.salonToday = Object.assign({}, ret.salonToday);
          }
          if (ret.salonMonth) {
            this.sstc.salonMonth = Object.assign({}, ret.salonMonth);
          }
          if (ret.salonAll) {
            this.sstc.salonAll = Object.assign({}, ret.salonAll);
          }
          this.sstc.keeperToday.splice(0, this.sstc.keeperToday.length);
          this.sstc.keeperMonth.splice(0, this.sstc.keeperMonth.length);
          this.sstc.keeperAll.splice(0, this.sstc.keeperAll.length);
          this.keeperList.splice(0, this.keeperList.length);
          if (ret.keeperToday && ret.keeperToday.length > 0) {
            this.sstc.keeperToday.push(...ret.keeperToday);
            this.keeperList.push(...ret.keeperToday);
            this.dataTable.keeperList.push(...ret.keeperToday);
          }
          if (ret.keeperMonth && ret.keeperMonth.length > 0) {
            this.sstc.keeperMonth.push(...ret.keeperMonth);
          }
          if (ret.keeperAll && ret.keeperAll.length > 0) {
            this.sstc.keeperAll.push(...ret.keeperAll);
          }
          if (ret.salonTodayPct) {
            this.sstc.salonTodayPct = Object.assign({}, ret.salonTodayPct);
          }
          if (ret.keeperTodayPct) {
            this.sstc.keeperTodayPct = Object.assign({}, ret.keeperTodayPct);
          }
          if (ret.salonAllPct) {
            this.sstc.salonAllPct = Object.assign({}, ret.salonAllPct);
          }
          if (ret.keeperAllPct) {
            this.sstc.keeperAllPct = Object.assign({}, ret.keeperAllPct);
          }
          // 默认显示整个门店的统计数据
          this.doShowSalon();
        })
        .catch(err => {
          console.log('salonStatistic', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.sstc.isFetching = false;
        });
    },
    doShowSalon: async function () {
      this.isSalon = true;
      this.choosedKid = '';
      this.statisticToday = Object.assign({}, this.sstc.salonToday);
      this.statisticMonth = Object.assign({}, this.sstc.salonMonth);
      this.statisticAll = Object.assign({}, this.sstc.salonAll);
      this.percentToday = Object.assign({}, this.sstc.salonTodayPct);
      this.percentAll = Object.assign({}, this.sstc.salonAllPct);
      await this.loadMonthBusiness(new Date());
    },
    doShowKeeper: async function (idx, kid) {
      if (this.clerkTable.dataListLoading) {
        MessageBox.alert('正在查询顾客数据, 请稍后...');
        return;
      }
      if (this.chart.isFetching) {
        MessageBox.alert('正在查询图表数据, 请稍后...');
        return;
      }
      this.isSalon = false;
      this.choosedKid = kid;
      const kd = this.sstc.keeperToday.find(x => x.kid === kid);
      const km = this.sstc.keeperMonth.find(x => x.kid === kid);
      const ka = this.sstc.keeperAll.find(x => x.kid === kid);
      if (kd) {
        this.statisticToday = Object.assign({}, kd);
      }
      if (km) {
        this.statisticMonth = Object.assign({}, km);
      }
      if (ka) {
        this.statisticAll = Object.assign({}, ka);
      }
      if (this.sstc.keeperTodayPct.hasOwnProperty(kid)) {
        this.percentToday = Object.assign({}, this.sstc.keeperTodayPct[kid]);
      }
      if (this.sstc.keeperAllPct.hasOwnProperty(kid)) {
        this.percentAll = Object.assign({}, this.sstc.keeperAllPct[kid]);
      }
      // 加载属于整个管家的顾客数据
      this.clerkTable.pageParam.page = 1;
      this.clerkTable.total = 0;
      await this.loadClerkList();
      await this.loadMonthBusiness(new Date());
    },
    doSearchKeeper: async function () {
      if (this.isSearching) {
        return;
      }
      this.isSearching = true;
      try {
        this.keeperList.splice(0, this.keeperList.length);
        const k = this.searchKey.trim();
        if (!k) {
          this.keeperList.push(...this.sstc.keeperToday);
        } else {
          const target = this.sstc.keeperToday.filter(x => x.kname !== undefined && x.kname.includes(k));
          if (target !== undefined && target.length > 0) {
            this.keeperList.push(...target);
          }
        }
      } finally {
        this.isSearching = false;
      }
    },
    doSearchTable: async function () {
      if (this.dataTable.isSearching) {
        return;
      }
      this.dataTable.isSearching = true;
      const k = this.dataTable.searchKey.trim();
      this.dataTable.keeperList.splice(0, this.dataTable.keeperList.length);
      try {
        if (this.isSalon) {
          if (!k) {
            this.dataTable.keeperList.push(...this.sstc.keeperToday);
          } else {
            const target = this.sstc.keeperToday.filter(x => x.kname !== undefined && x.kname.includes(k));
            if (target !== undefined && target.length > 0) {
              this.dataTable.keeperList.push(...target);
            }
          }
        } else {
          this.loadClerkList(k);
        }
      } finally {
        this.dataTable.isSearching = false;
      }
    },
    loadClerkList: async function (cname) {
      if (this.clerkTable.dataListLoading) {
        return;
      }
      if (!this.choosedKid) {
        MessageBox.alert('请先选择管家');
        return;
      }
      this.clerkTable.dataListLoading = true;
      const params = { sid: this.salon.salonId, kid: this.choosedKid };
      params.pageNumber = this.clerkTable.pageParam.page;
      params.pageSize = this.clerkTable.pageParam.limit;
      if (cname) {
        params.cname = cname;
      }
      const errAlertMsg = '查询顾客列表失败';
      await txsApi
        .getClerkPageByKeeperId(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          if (res.data.data && res.data.data.records) {
            this.clerkTable.dataList = res.data.data.records;
            this.clerkTable.total = res.data.data.total;
          }
        })
        .catch(e => {
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.clerkTable.dataListLoading = false;
        });
    },
    loadMonthBusiness: async function (m) {
      if (!this.salon.salonId) {
        // 不属于任何门店的用户(通常是系统管理员)
        return;
      }
      const now = new Date();
      if (
        now.getFullYear() < m.getFullYear() ||
        (now.getFullYear() === m.getFullYear() && now.getMonth() < m.getMonth())
      ) {
        MessageBox.alert('只能当月或者当月之前的月份');
        return;
      }
      if (this.chart.isFetching) {
        return;
      }
      this.chart.isFetching = true;
      const params = { month: m.format('yyyy-MM-dd') };
      if (this.choosedKid) {
        params.kid = this.choosedKid;
      }
      const errAlertMsg = '查询月流水失败';
      await brchApi
        .getBusinessChart(this.salon.salonId, params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          const ret = res.data.data;
          if (ret && ret.xaxis) {
            this.$refs.refChart.flushChart(ret.xaxis, ret.yaxisDayVolume, ret.yaxisTrust23Pct);
          } else {
            this.$refs.refChart.flushChart([], [], []);
          }
        })
        .catch(err => {
          console.log('loadMonthBusiness', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.chart.isFetching = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';

.page {
  background-color: #f8f8fa;
  padding: 16px 24px 0 16px;
  display: flex;
  justify-content: space-evenly;
  width: 100%;

  .navigator {
    width: 24%;
    height: 100%;
    min-height: 790px;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: hidden;

    .navigator_ctx {
      width: 100%;
      height: 659px;
      overflow-x: hidden;
      overflow-y: auto;
    }
  }

  .data_hd {
    width: 100%;
    height: 120px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-evenly;

    .data_hd_item {
      width: 203px;
      height: 100%;
      padding: 5px 16px 5px 16px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 10px;

      .data_hd_bottom {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .has_new {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: #ff5b5b;
        padding: 3px 3px 3px 3px;
        background-color: rgba(255, 91, 91, 0.1);
        border-radius: 3px;
      }
    }
  }

  .data_content {
    width: 100%;
    height: auto;
    margin: 0 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .data_table {
      width: 60%;
      height: 100%;
      background-color: #fff;
      padding: 16px;

      .rmk {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;

        .has {
          color: #ff5b5b;
        }

        .not {
          color: #666666;
        }

        .dot_red {
          width: 5px;
          height: 5px;
          background-color: #ff5b5b;
          border-radius: 50%;
          display: inline-block;
        }

        .dot_grey {
          width: 5px;
          height: 5px;
          background-color: #666666;
          border-radius: 50%;
          display: inline-block;
        }
      }
    }

    .data_pct {
      width: 40%;
      height: 100%;
      background-color: #fff;
      padding: 16px 0 0 0;

      .data_pct_hd {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;

        .data_pct_item {
          width: 100%;
          height: auto;
          background: #fafafa;
          padding: 0 12px 0 12px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 10px;
        }
      }

      .data_chart {
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 16px;
      }
    }
  }
}
.salon_div {
  cursor: pointer;
  margin: 5px 0 0 0;
  padding: 5px 0 10px 0;
}
.keeper_div {
  cursor: pointer;
  padding: 16px 20px;
  color: #666666;
  background-color: #ffffff;
  transition: background-color 0.3s; /* 平滑背景色过渡 */
  .has_new {
    padding: 3px 12px;
    background-color: #f5f5f5;
    color: #ff5b5b;
  }
}
.keeper_div_active {
  color: #724eff;
  background-color: #f0f0ff;
  border-radius: 8px 8px 8px 8px;
}
</style>
